<template>
	<view class="zh-weight-edit-popup">
		<u-popup :show="props.show" @close="close">
			<template v-slot:content>
				<view class="weight-popup-content">
					<view class="display-flex ">
						<view class="thumbnail">
							<image :src="IMG_URL + '/shop/hw_pic1.png'"  mode="aspectFit"/>
						</view>
						<view class="ml-30">
							<view>
								<text class="font-FF661B font-26" v-if="!props.data.price">电议</text>
								<text class="font-FF661B font-26" v-if="props.data.price">¥{{ props.data.price }}</text>
								<text class="font-26 ml-5" v-if="props.data.price">/吨</text>
								<u-tags :value="props.data.startingWeight + '吨起订'" 
									paddingx="12" 
									height="35" 
									fontSize="21" 
									color="#FF661B"
									bgColor="#FFF1EA"
									border="none"
									class="ml-15"
									v-if="props.data.startingWeight"
									></u-tags>
							</view>
							<view class="mt-30">
								<text class="font-34 font-bold">{{ props.data.spzs }}</text>
							</view>
							<view class="mt-40">
								<text class="font-26 font-666">可售：</text>
								<text class="font-26">{{ props.data.upShelvesWeight }}吨</text>
							</view>
						</view>
					</view>
					<view class="shoping-weight display-flex align-center mt-60">
						<view class="display-flex align-center">
							<text class="font-30 font-bold">购买重量</text>
						</view>
						<view class="display-flex align-center ml-100" >
							<u-number-box 
								width="160" 
								:digit="Digit.weight"
								:rules="[{max:props.data.upShelvesWeight,message:'输入的重量超过可售重量'}]"
								color="#DCDCDC" 
								radiusSize="8" 
								size="60" 
								fontSize="26"
								unit = '吨'
								v-model="setWeightData.query.weight"
							></u-number-box>
							<view class="ml-30" @click="selectUpShelvesWeight">
								<text class="font-26 font-267CF8 font-bold">全部购买</text>
							</view>
						</view>
					</view>
					<view class="sub-total display-flex align-center mt-40 border-top">
						<view>
							<text class="font-30 font-bold">合计金额</text>
						</view>
						<view class="ml-100">
							<text class="font-FF661B">¥{{ getSubtotal }}</text>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:footer>
				<button class="app-primary-button mt-200" hover-class="app-primary-button-active mt-200" @click="sure">确定</button>
			</template>
		</u-popup>
	</view>
</template>

<script setup lang="ts">
	import { reactive, computed, watch } from 'vue'
	import { amount, tip, nav } from '@/utils'
	import { goods } from '@/api'
	import { Digit } from '@/enum/digit'
	import { IMG_URL } from '@/utils/constant'
	
	const setWeightData:any = reactive({
		query:{
			id: '',
			num: 0,
			price: 0,
			spbhid: '',
			spckid: '',
			spcwid: '',
			subtotal: 0,
			weight: '',
		}
	})
	
	const props = withDefaults(defineProps<{
		show: boolean
		data?:any
	}>(), {
		show:true,
		data:{}
	})
	
	setWeightData.query.weight = props.data.weight?props.data.weight:0
	watch(() => props.show,() =>{
		setWeightData.query.weight = props.data.weight?props.data.weight:0
		props.data.upShelvesWeight = props.data.upShelvesWeight?props.data.upShelvesWeight:0
		setWeightData.query.num = (props.data.weight * 1000 / props.data.spjsl).toFixed(Digit.num) 
	})
	
	const emit = defineEmits(['sure', 'close'])
	
	
	const getSubtotal = computed(() => {
		return subTotal()
	})
	
	const subTotal = () => {
		const price = props.data && props.data.price?props.data.price:0
		
		return amount.getSubTotal(setWeightData.query.weight, price)
	}
	
	const selectUpShelvesWeight = () => {
		setWeightData.query.weight = props.data.upShelvesWeight
	}
	
	const close = () => {
		initData()
		emit('close')
	}
	
	const sure = () => {
		if(nav.isNavNormal()) {
			if(!setWeightData.query.weight && setWeightData.query.weight !== 0) return tip.showToast('请输入购买重量')
			if(setWeightData.query.weight > props.data.upShelvesWeight) return tip.showToast('输入的重量超过可售重量')
			if(props.data) {
				setWeightData.query = {
					...setWeightData.query,
					price: props.data.price?props.data.price:0,
					spbhid: props.data.spbhid,
					spckid: props.data.spckid,
					spcwid: props.data.spcwid,
					subtotal:subTotal(),
				}
			}
			emit('sure', setWeightData.query)
			initData()
		}
	}
	
	const initData =  () => {
		setWeightData.query = {
			id: '',
			num: 0,
			price: 0,
			spbhid: '',
			spckid: '',
			spcwid: '',
			subtotal: 0,
			weight: '',
		}
	}
</script>

<style lang="scss" scoped>
	.zh-weight-edit-popup {
		.weight-popup-content {
			padding-bottom:100rpx;
			.thumbnail {
				width:188rpx;
				height: 188rpx;
				border:1rpx solid $uni-border-color;
				border-radius: 10px;
				image {
					width:100%;
					height: 100%;
				}
			}
			.sub-total {
				padding-top: 40rpx;
			}
		}
	}
</style>
